<template>
	<div class="login-container">
		<el-form class="login-form" :model="loginData" :rules="loginRules" ref="loginForm" label-position="left">
			<h1 class="title">测试后台管理</h1>
      <div class="title">账号：admin|密码：888888</div>
			<el-form-item prop="empId">
				<el-input prefix-icon="el-icon-user" v-model="loginData.empId" placeholder="账号" />
			</el-form-item>
			<el-form-item prop="password">
				<el-input prefix-icon="el-icon-lock" v-model="loginData.password" placeholder="密码" show-password></el-input>
			</el-form-item>
			<el-form-item class="btn">
				<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
					登录
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 登录loading
			loading: false,
			// 登录表单数据
      loginData: {
        empId: '',
				password: ''
			},
			// el登录验证
			loginRules: {
				name: [
					{ required: true, message: '请输入empId', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入password', trigger: 'blur' },
				]
			},
		}
	},
	methods: {
		handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.$api.user.login(this.loginData).then(resp => {
            window.localStorage.setItem("empId", resp.empId)
            this.$router.push({ name: 'option' });
            this.$store.dispatch("cacheUserInfo",resp)
          })
        } else {
          return false
        }
      })
		}
	},

}
</script>
<style lang="less" scoped>
.login-container {
	width: 100%;
	height: 100vh;
	background-color: #2d3a4b;
	overflow: hidden;
	el-input {
		display: inline-block;
		height: 47px;
		width: 85%;
		input {
			background: transparent;
			border: 0;
			-webkit-appearance: none;
			border-radius: 0;
			padding: 12px 5px 12px 15px;
			color: #283443;
			height: 47px;
			&:-webkit-autofill {
				-webkit-box-shadow: 0 0 0 1000px #283443 inset !important;
				-webkit-text-fill-color: #fff !important;
			}
		}
	}
	.login-form {
		position: relative;
		width: 400px;
		height: 300px;
		left: 50%;
		top: 50%;
		margin-left: -200px;
		margin-top: -150px;
		overflow: hidden;
		.title {
			text-align: center;
			margin: 10px;
		}
		.btn {
			text-align: center;
		}
	}
}
</style>
